<template>
  <view class="tag-container" v-if="tags && tags.length > 0">
    <span 
      v-for="tag in tags" 
      :key="tag" 
      class="tag"
    >
      {{ tag }}
    </span>
  </view>
  <view class="tag-container" v-else>
    <span class="tag">{{ defaultTag }}</span>
  </view>
</template>

<script>
export default {
  name: 'TagComponent',
  props: {
    // 标签数组
    tags: {
      type: Array,
      default: () => []
    },
    // 默认标签文本
    defaultTag: {
      type: String,
      default: '默认标签'
    }
  }
}
</script>

<style lang="scss" scoped>
.tag-container {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.tag {
  display: inline-block;
  padding: 4px 12px;
  background-color: #ff6b6b;
  color: #ffffff;
  border-radius: 16px;
  font-size: 12px;
  line-height: 1.4;
  white-space: nowrap;
  margin-right: 8px;
  margin-bottom: 4px;
  box-shadow: 0 2px 4px rgba(255, 107, 107, 0.2);
}
</style>